<template>
    <h2 id="title2">hello</h2>
    <!-- 这是标记在html标签上,拿到的是DOM元素-->
    <h2 ref="title2">hello2</h2>
    <button @click="showLog">测试</button>
    <!-- 这是标记在vue组件标签上,拿到的是组件实例对象 -->
    <Person ref="p" />
</template>

<!-- vue3 的写法, 不带便利插件 -->
<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script lang="ts" setup>
import Person from './components/Person.vue'
import { ref } from 'vue'
let title2 = ref()
let p = ref()
function showLog() {
    // console.log(title2.value)
    // 看不到person组件实例中的a,b,c数据
    console.log(p.value)
}
</script>
<style scoped></style>